<div class="packagingDaily" id="packagingDaily" style="height:100%">
    <div class="ui-layout-center scrollable" id="reportHolder"> 
        <div class="A4 p_1 landscape">
            <div class="column w100">
                <h1>packaging daily report</h1>
            </div>
            <div class="column w25">
                <table class="header-data w100">
                    <tbody><tr>
                        <td class="w25 left">For</td>
                        <td class="w75" id="reportForDate"></td>
                    </tr>
                    <tr>
                        <td class="w25 left">Entries</td>
                        <td class="w75">---</td>
                    </tr>
                    <tr>
                        <td class="w25 left">User</td>
                        <td class="w75" id="reportUser"></td>
                    </tr>
                    <tr>
                        <td class="w25 left">Data</td>
                        <td class="w75" id="reportTime"></td>
                    </tr>
                    <tr>
                        <td class="w25 left">Pages</td>
                        <td class="w75" id="reportPage"></td>
                    </tr>
                </tbody></table>
            </div>
            <div class="column w75">
                <div class="column w100 np" style="height: 95px;">
                    <hr>
                    <div class="column np w25">
                        <span>Notes</span>
                    </div>
                    <div class="column np w75 text-right">
                        <span>Dr. Oetker Canada Ltd.</span>
                    </div>
                </div>
            </div>
            <div class="column w100 np">
                <div class="column w25">
                    <hr>
                </div>
                <div class="column w75">
                    <hr>    
                </div>
            </div>
            <div class="footer">
                <div class="generted">Generated: 21.08.2014.</div>
                <div class="page_num">Page 1/12</div>
            </div>
        </div>
    </div>
    <div class="ui-layout-south" style="float:left">
        <input type="text" class="medium ml text datepicker hook_day">
        <button class="no-mrgn preview">Preview</button>
        <button class="no-mrgn print" data-doc-url="">Print</button>
    </div>
</div>
<script>
    var PackagingDailyFX = function() {
        var _self = this;
        _self.perform = function() {
            $(".packagingDaily").layout({
                resizable: false,
                closable: false,
                south__size: "20"
            });
            $('.datepicker.hook_day').datepicker({
                defaultDate: new Date(),
                dateFormat: 'd.m.yy'
            }).datepicker('setDate', new Date());
        };

        _self.preview = function() {
            $("body").css('cursor', 'wait');
            var date = $('.datepicker.hook_day').val();
            var params = {
                user: "John Doe",
                request: 210,
                dataType: "json",
                pStart: date,
                pOneDay: "oneDay"
            };
            reportBuilder.buildPackagingDailyReport(params, function() {
                $("body").css('cursor', 'default');
            });
        };

        _self.printReport = function() {
            reportBuilder.printReport();
        };

        _self.assignEventHandlers = function() {
            $(document).on("click", "button.preview", function() {
                _self.preview();
            });

            $(document).on("click", "button.print", function() {
                _self.printReport();
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off("click", "button.preview");

            $(document).off("click", "button.print");
        };
    };
    if(!window.pDailyFX){
        window.pDailyFX = new PackagingDailyFX();
        window.pDailyFX.perform();
        window.pDailyFX.clearEventHandlers()
        window.pDailyFX.assignEventHandlers();
    }
    else{
        window.pDailyFX.perform();
        window.pDailyFX.clearEventHandlers()
        window.pDailyFX.assignEventHandlers();
    }
</script>